﻿<AutoComplete @bind-Value="@value" CompareWith="CompareWith" OnSelectionChange="OnSelectionChange">
    <AutoCompleteOptions>
        @foreach (var option in options)
        {
            <AutoCompleteOption Value="@option" Label="@option.label">
            </AutoCompleteOption>
        }
    </AutoCompleteOptions>

</AutoComplete>
<Divider></Divider>
<span>bind-Value:@value</span>
<br />
<span>SelectedValue:@(System.Text.Json.JsonSerializer.Serialize(selectItem?.Value))</span>



@code
{
    private string value;

    ObjectValueOption inputValue = new ObjectValueOption() { label = "Lucy", value = "lucy", age = 20 };
    ObjectValueOption[] options = new ObjectValueOption[] {
                                    new ObjectValueOption()   { label= "Lucy", value= "lucy", age= 20 },
                                    new ObjectValueOption()  { label= "Jack", value= "jack", age= 22 },
                                    };


    Func<object, object, bool> CompareWith = (a, b) =>
    {
        if (a is ObjectValueOption o1 && b is ObjectValueOption o2)
        {
            return o1.value == o2.value;
        }
        else
        {
            return false;
        }
    };

    private AutoCompleteOption selectItem;

    void OnSelectionChange(AutoCompleteOption item)
    {
        selectItem = item;
    }

    public class ObjectValueOption
    {
        public string label { get; set; }
        public string value { get; set; }
        public int age { get; set; }

    }
}